<template>
    <div>
        <!-- 游戏内注册弹窗 -->
        <el-dialog title="注册游戏账号" v-dialogDrag :visible.sync="ClickRegisterDialogVisible" width="521px" :close-on-click-modal="false" :append-to-body="true" @close="ClickRegister()">
            <!-- <svg-icon class="dialogclose" @click="ClickRegister()" icon-file-name="close" /> -->
            <div class="RegisterInput">
                <div class="RegisterInput_left">
                    <div class="RegisterInput_left_div">
                        <div>注册账号 :</div>
                        <el-input type="text" id="1" @focus="inputfocus" v-model="information.username" maxlength="10" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div>账号密码 :</div>
                        <el-input type="password" id="2" @focus="inputfocus" v-model="information.password" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div>确认密码 :</div>
                        <el-input type="password" id="3" @focus="inputfocus" v-model="information.password2" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div>您的名字 :</div>
                        <el-input type="text" id="4" @focus="inputfocus" v-model="information.name" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div>您的生日 :</div>
                        <el-input type="text" id="5" @focus="inputfocus" v-model="information.day" style="width: 125px" />
                        <div style="margin-left: 15px; width: 80px">1992/04/25</div>
                    </div>
                    <div class="RegisterInput_left_div">
                        <div style="color: #e64826">问题之一 :</div>
                        <el-input type="text" id="6" @focus="inputfocus" v-model="information.w1" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div style="color: #e64826">答案之一 :</div>
                        <el-input id="7" @focus="inputfocus" v-model="information.d1" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div style="color: #e64826">问题之二 :</div>
                        <el-input type="text" id="8" @focus="inputfocus" v-model="information.w2" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div style="color: #e64826">答案之二 :</div>
                        <el-input type="text" id="9" @focus="inputfocus" v-model="information.d2" />
                    </div>
                    <div class="RegisterInput_left_div">
                        <div>邮箱地址 :</div>
                        <el-input type="text" id="10" @focus="inputfocus" v-model="information.email" />
                    </div>
                    <div class="RegisterInput_left_div" style="display: none">
                        <div>身份证号 :</div>
                        <el-input type="text" id="11" @focus="inputfocus" v-model="information.number" readonly="readonly" />
                    </div>
                </div>
                <div class="RegisterInput_right">
                    <div class="RegisterInput_right_top">
                        <p>红色字体是找回密码需要的信息 请牢记！</p>
                        <p>否则密码忘记无法找回！</p>
                    </div>
                    <div class="RegisterInput_right_bottom">
                        <p v-show="active === 1 ? true : false">
                            您的帐号名称可以包括： 字符、数字的组合。 帐号名称长度必须为4-10之间。 登陆帐号并游戏中的人物名称。 请仔细输入创建帐号所需信息。 您的登陆帐号可以登陆游戏
                            及我们网站，以取得一些相关信息。
                        </p>
                        <p v-show="active === 1 ? true : false" style="margin-top: 20px">建议您的登陆帐号不要与游戏中的角色名相同，以确保你的密码不会被爆力破解。</p>
                        <p v-show="active === 2 ? true : false">
                            您的密码可以是字符及数字的组合，但密码长度必须至少4位。
                            <br />
                            建议您的密码内容不要过于简单，以防被人猜到。
                            <br />
                            请记住您输入的密码，如果丢失密码
                            <br />
                            将无法登录游戏。
                        </p>
                        <p v-show="active === 3 ? true : false">再次输入密码，以确认。</p>
                        <p v-show="active === 4 ? true : false">
                            请输入您的全名.
                            <br />
                            您输入的信息必须真实
                            <br />
                            正确的信息
                            <br />
                            如果使用了虚假的注册信息
                            <br />
                            您的帐号将被取消。
                        </p>
                        <p v-show="active === 5 ? true : false">
                            请输入您的生日
                            <br />
                            例如：1988/08/08
                        </p>
                        <p v-show="active === 5 ? true : false" style="margin-top: 20px">这个将用于密码丢失后找回密码。</p>
                        <p v-show="active === 6 ? true : false">请输入第一个密码提示问题</p>
                        <p v-show="active === 6 ? true : false" style="margin-top: 20px">这个将用于密码丢失后找回密码。</p>
                        <p v-show="active === 6 ? true : false" style="margin-top: 20px">
                            您输入的信息必须真实
                            <br />
                            正确的信息
                            <br />
                            如果使用了虚假的注册信息
                            <br />
                            您的帐号将被取消。
                        </p>
                        <p v-show="active === 7 ? true : false">请输入上面问题的答案。</p>
                        <p v-show="active === 7 ? true : false" style="margin-top: 20px">这个将用于密码丢失后找回密码。</p>
                        <p v-show="active === 7 ? true : false" style="margin-top: 20px">
                            您输入的信息必须真实
                            <br />
                            正确的信息
                            <br />
                            如果使用了虚假的注册信息
                            <br />
                            您的帐号将被取消。
                        </p>
                        <p v-show="active === 8 ? true : false">请输入第二个密码提示问题</p>
                        <p v-show="active === 8 ? true : false" style="margin-top: 20px">这个将用于密码丢失后找回密码。</p>
                        <p v-show="active === 8 ? true : false" style="margin-top: 20px">
                            您输入的信息必须真实
                            <br />
                            正确的信息
                            <br />
                            如果使用了虚假的注册信息
                            <br />
                            您的帐号将被取消。
                        </p>
                        <p v-show="active === 9 ? true : false">请输入上面问题的答案。</p>
                        <p v-show="active === 9 ? true : false" style="margin-top: 20px">这个将用于密码丢失后找回密码。</p>
                        <p v-show="active === 9 ? true : false" style="margin-top: 20px">
                            您输入的信息必须真实
                            <br />
                            正确的信息
                            <br />
                            如果使用了虚假的注册信息
                            <br />
                            您的帐号将被取消。
                        </p>
                        <p v-show="active === 10 ? true : false">请输入您的邮件地址。您的邮件将被接收最近更新的一些信息</p>
                        <p v-show="active === 11 ? true : false" style="display: none">身份证号码</p>
                    </div>
                </div>
            </div>
            <div class="RegisterBottom">
                <el-checkbox v-model="Checked" @change="SaveMessage()">保存信息用于下次注册</el-checkbox>
                <el-button class="RegisterBottom_Btn1" @click="ClickEnroll()" :loading="loading">
                    <span v-if="!loading">确定</span>
                    <span v-else>注册中...</span>
                </el-button>
                <!-- <el-button class="RegisterBottom_Btn1" @click="ClickEnroll()" :loading="loading">
                    <span v-if="!loading">确定</span>
                    <span v-else>注册中...</span>
                </el-button> -->
                <el-button class="RegisterBottom_Btn2" @click="ClickRegister">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { newcostID, DelID, box_loggers } from '@/api/url'
export default {
  created () {
    this.sn = box.m_sn;
    this.referrer = box.m_referrer

  },
  data () {
    return {
      loading: false,//加载中
      ClickRegisterDialogVisible: false,//注册账号弹窗
      Checked: false,//是否保存注册的游戏账号
      active: 0,
      sn: '',
      regist_account_info_status: '',
      game_regist_account_info_msg: '',
      information: {
        username: '',
        password: '',
        password2: '',
        name: '',
        day: '',
        w1: '',
        d1: '',
        w2: '',
        d2: '',
        email: '123456',
        number: '1 | 123',
      }, //信息集合
      GameID: '', //游戏ID
      DelId: '', //删除游戏ID
      partnerId: '', //商户ID
      referrer: '', //来路
      boxName: '', //盒子名称
    }
  },
  mounted () {
    this.$EventBus.$on('boxName', data => {
      this.boxName = data
      if (JSON.parse(window.localStorage.getItem('' + this.boxName + 'checkedS')) == 'null') {
        window.localStorage.setItem('' + this.boxName + 'checkedS', false)
      } else if (JSON.parse(window.localStorage.getItem('' + this.boxName + 'checkedS'))) {
        window.localStorage.setItem('' + this.boxName + 'checkedS', true)
      } else {
        window.localStorage.setItem('' + this.boxName + 'checkedS', false)
      }
      setTimeout(() => {
        const booleancheckedS = JSON.parse(window.localStorage.getItem('' + this.boxName + 'checkedS'))
        if (booleancheckedS) {
          this.Checked = true
          setTimeout(() => {
            this.information = JSON.parse(window.localStorage.getItem('' + this.boxName + 'log-onmessage'))
          }, 200)
        } else {
          this.Checked = false
          window.localStorage.setItem('' + this.boxName + 'log-onmessage', JSON.stringify({ username: '', password: '', password2: '', name: '', day: '', w1: '', d1: '', w2: '', d2: '', email: '123456', number: '1 | 123', }))//游戏注册信息
          setTimeout(() => {
            this.information = JSON.parse(window.localStorage.getItem('' + this.boxName + 'log-onmessage'))
          }, 200)
        }
      }, 100)
    })
  },
  methods: {
    ClickRegister () {
      this.ClickRegisterDialogVisible = false
      this.loading = false
      this.information.username = ''
      this.information.password = ''
      this.information.password2 = ''
      this.information.name = ''
      this.information.day = ''
      this.information.w1 = ''
      this.information.d1 = ''
      this.information.w2 = ''
      this.information.d2 = ''
    },
    //点击获取本地存储
    HQClickRegister () {
      const booleancheckedS = JSON.parse(window.localStorage.getItem('' + this.boxName + 'checkedS'))
      setTimeout(() => {
        if (booleancheckedS) {
          this.Checked = true
          setTimeout(() => {
            this.information = JSON.parse(window.localStorage.getItem('' + this.boxName + 'log-onmessage'))
          }, 200)
        } else {
          this.Checked = false
          window.localStorage.setItem('' + this.boxName + 'log-onmessage', JSON.stringify({ username: '', password: '', password2: '', name: '', day: '', w1: '', d1: '', w2: '', d2: '', email: '123456', number: '1 | 123', }))//游戏注册信息
          setTimeout(() => {
            this.information = JSON.parse(window.localStorage.getItem('' + this.boxName + 'log-onmessage'))
          }, 200)
        }
      }, 100)
    },
    //点击保存注册信息
    SaveMessage () {
      this.information.username = this.information.username
      this.information.password = this.information.password
      this.information.password2 = this.information.password2
      this.information.name = this.information.name
      this.information.day = this.information.day
      this.information.w1 = this.information.w1
      this.information.d1 = this.information.d1
      this.information.w2 = this.information.w2
      this.information.d2 = this.information.d2
      this.information.email = '123456'
      this.information.number = '1 | 123'
      if (this.Checked) {
        // this.$store.commit("SaveMessageI", this.information);
        // this.$store.commit("checkedS", true);
        window.localStorage.setItem('' + this.boxName + 'log-onmessage', JSON.stringify(this.information))//游戏注册信息
        window.localStorage.setItem('' + this.boxName + 'checkedS', true)//游戏注册是否存储信息
      } else {
        // this.$store.commit("SaveMessageI", { username: '', password: '', password2: '', name: '', day: '', w1: '', d1: '', w2: '', d2: '', email: '123456', number: '1 | 123', });
        window.localStorage.setItem('' + this.boxName + 'log-onmessage', JSON.stringify({ username: '', password: '', password2: '', name: '', day: '', w1: '', d1: '', w2: '', d2: '', email: '123456', number: '1 | 123', }))//游戏注册信息
        // this.$store.commit("checkedS", false);
        window.localStorage.setItem('' + this.boxName + 'checkedS', false)//游戏注册是否存储信息
      }
    },
    inputfocus (e) {
      this.active = Number(e.path[0].id)
    },
    // 点击注册游戏账号
    ClickEnroll () {
      this.loading = true;

      var this_1 = this
      var username = this.information.username
      var password = this.information.password
      var name = this.information.name
      var day = this.information.day
      var w1 = this.information.w1
      var d1 = this.information.d1
      var w2 = this.information.w2
      var d2 = this.information.d2
      var email = '123456'
      var number = '1 | 123'
      var regist_interval = null
      var regist_interval_isYes = null

      if (this.Checked) {
        this.SaveMessage()
        // this.$store.commit("checkedS", true);
        window.localStorage.setItem('' + this.boxName + 'checkedS', true)//游戏注册是否存储信息
      } else {
        // this.$store.commit("SaveMessageI", { username: '', password: '', password2: '', name: '', day: '', w1: '', d1: '', w2: '', d2: '', email: '123456', number: '1 | 123', });
        // this.$store.commit("checkedS", false);
        window.localStorage.setItem('' + this.boxName + 'checkedS', false)//游戏注册是否存储信息
      }
      if (username !== 'undefined' && username != null && username !== '' && password !== 'undefined' && password != null && password !== '' && name !== 'undefined' && name != null && name !== '' && day !== 'undefined' && day != null && day !== '' && w1 !== 'undefined' && w1 != null && w1 !== '' && d1 !== 'undefined' && d1 != null && d1 !== '' && w2 !== 'undefined' && w2 != null && w2 !== '' && d2 !== 'undefined' && d2 != null && d2 !== '') {
        number = this.partnerId + '' + '|' + this.DelId + ''
        console.log(number);
        setTimeout(() => {
          game.regist_account(username, password, name, day, w1, d1, w2, d2, email, number, function (result) {
            if (result) {
              regist_interval = setInterval(function () {
                this.game_regist_account_info_msg = game.regist_account_info.msg
                this.regist_account_info_status = game.regist_account_info.status
                console.log(this.regist_account_info_status);
                var info = game.regist_account_info.status + ":" + game.regist_account_info.msg;
                box.print(info)
                if (game.regist_account_info.status == 2 || game.regist_account_info.status == 3) {
                  clearInterval(regist_interval);
                }
              }, 100)
            } else {
              this_1.$message({ message: '提交注册失败', type: 'warning', center: true })
              clearInterval(regist_interval);
              clearInterval(regist_interval_isYes);
              this_1.loading = false;
            }
          })
          regist_interval_isYes = setInterval(function () {
            clearInterval(regist_interval);
            clearInterval(regist_interval_isYes);
            console.log(this.regist_account_info_status);
            if (this.regist_account_info_status === 1 || this.regist_account_info_status === 2 || this.regist_account_info_status === 3) {
              clearInterval(regist_interval);
              clearInterval(regist_interval_isYes);
              console.log(this.regist_account_info_status);
              if (this.regist_account_info_status === 2) {
                this_1.ClickRegisterDialogVisible = false
                this_1.loading = false;
                this_1.$message({ message: '注册成功', type: 'success', center: true })
                this_1.box_loggers()
                if (this_1.Checked) {
                  this_1.SaveMessage()
                }
              } else if (this.regist_account_info_status === 3) {
                this_1.loading = false;
                this_1.$message({ message: this.game_regist_account_info_msg, type: 'warning', center: true })
                // this_1.DelID(this_1.DelId)
              } else if (this.regist_account_info_status === 1) {
                this_1.loading = false;
                this_1.$message({ message: '请求失败,请稍后再试', type: 'warning', center: true })
                // this_1.DelID(this_1.DelId)
              }
            }
          }, 1000)
        }, 2000)
      } else {
        this_1.$message({ message: '请输入注册信息!', type: 'warning', center: true })
        clearInterval(regist_interval);
        clearInterval(regist_interval_isYes);
        this_1.loading = false;
      }
    },
    // 新增游戏账号价值
    async newcostID () {
      try {
        const res = await newcostID({ gameAccount: this.information.username, gamePwd: this.information.password, gameId: this.GameID })
        if (res.data.code === 200) {
          this.DelId = res.data.data.id//wid
          this.partnerId = res.data.partnerId//合作商id
          this.ClickEnroll()
        } else {
          this.$message({ message: res.data.msg, type: 'warning', center: true })
        }
      } catch (error) {

      }
    },
    // 游戏账号注销
    async DelID (id) {
      try {
        const res = await DelID(id)
        if (res.data.code === 200) {
          console.log('账号注销了');
        }
      } catch (error) {
      }
    },
    // 盒子注册上报统计
    async box_loggers () {
      try {
        const res = await box_loggers({ sn: this.sn, gameAccount: this.information.username, gameId: this.GameID, source: '1', referrerHost: this.referrer })
        if (res.data.code === 200) {
          console.log('盒子注册上报统计了');
        }
      } catch (error) {
      }
    },
  },
  beforeDestroy () {
    this.$EventBus.$off('boxName')
  }
}
</script>

<style lang="less" scoped>
// 弹窗关闭按钮样式
.dialogclose {
    position: relative;
    top: -55px;
    left: 480px;
    color: #fff;
    font-size: 28px;
    z-index: 9999;
    &:hover {
        color: #969696;
    }
}
/deep/.el-dialog__header {
    background-size: cover;
    text-align: left;
}
/deep/.el-dialog__title {
    font-size: 18px;
    font-family: '微软雅黑';
    font-weight: 400;
    text-align: left;
    color: #f1e4c8 !important;
    letter-spacing: 0.54px;
}
/deep/.el-dialog__body {
    padding: 30px 20px !important;
    height: 540px !important;
    background: url('@/assets/dialogImg/Registration_bg.png');
}
.RegisterInput {
    display: flex;
    .RegisterInput_left {
        width: 316px;
        height: 440px;
        .RegisterInput_left_div {
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            div {
                width: 60px;
                font-size: 12px;
                font-family: '微软雅黑';
                font-weight: 400;
                text-align: left;
                color: #f1e4c8;
            }
            /deep/ .el-input__inner {
                width: 221px;
                height: 30px;
                border: 1px solid #a47e49;
                border-radius: 4px;
                margin-left: 5px;
                font-size: 12px;
                font-family: '微软雅黑';
                font-weight: normal;
                text-align: left;
                color: #f1e4c8;
                background-color: transparent;
                padding-left: 10px;
                color: #dddddd;
            }
            /deep/.el-input__inner:hover,
            .el-input__inner:focus {
                border-color: #ffb331;
            }
            /deep/ .el-input__inner:focus {
                border-color: #ffb331;
            }
            /deep/input::-webkit-input-placeholder {
                font-family: Microsoft YaHei, Microsoft YaHei-Regular;
                font-weight: 400;
                text-align: left;
                color: #978152;
                font-family: '微软雅黑';
            }
        }
    }
    .RegisterInput_right {
        width: 172px;
        .RegisterInput_right_top {
            width: 168px;
            height: 50px;
            font-size: 12px;
            font-family: '微软雅黑';
            font-weight: 400;
            text-align: left;
            color: #e64826;
        }
        .RegisterInput_right_bottom {
            width: 171px;
            height: 338px;
            border: 1px solid #a47e49;
            border-radius: 4px;
            margin-top: 20px;
            color: #ff9e2e !important;
            font-size: 12px !important;
            padding: 20px !important;
        }
    }
}
.RegisterBottom {
    height: 50px;
    /deep/.el-checkbox {
        margin-left: 22px;
        width: 268px;
    }
    /deep/.el-checkbox__inner {
        border: 1px solid #ffb331;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0);
    }
    /deep/.el-checkbox__inner:hover {
        border-color: #ffd48b;
    }
    /deep/.el-checkbox__label {
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        text-align: left;
        color: #ffb331;
    }
    /deep/.el-checkbox__input.is-checked + .el-checkbox__label {
        color: #ffd48b !important;
    }
    /deep/.el-checkbox__input.is-checked .el-checkbox__inner {
        border: 1px solid #ffd48b;
        border-radius: 2px;
        background: rgba(0, 0, 0, 0);
    }
    /deee/.el-checkbox__inner::after {
        border: 1px solid #ffd48b !important;
    }
    /deep/.el-button {
        width: 90px;
        height: 38px;
        padding: 0;
    }
    /deep/.el-button:focus,
    .el-button:hover {
        border-color: rgba(0, 0, 0, 0);
        // background-color: rgba(0, 0, 0, 0);
    }
    .RegisterBottom_Btn1 {
        width: 90px;
        height: 38px;
        background: linear-gradient(180deg, #cdad5f, #f2ead1);
        border: 0px;
        border-radius: 4px;
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        text-align: center;
        color: #242322;
        letter-spacing: 0.28px;
    }
    .RegisterBottom_Btn1:hover {
        background: linear-gradient(180deg, #b19248, #d8cfb4);
    }
    .RegisterBottom_Btn2 {
        background: rgba(0, 0, 0, 0);
        font-size: 14px;
        font-family: '微软雅黑';
        font-weight: 400;
        color: #fff2dc;
        letter-spacing: 0.28px;
        border: 1px solid #fff2dc;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0);
        margin-left: 8px;
    }
    .RegisterBottom_Btn2:hover {
        color: #e3d1b1 !important;
        border: 1px solid #e3d1b1;
    }
}
</style>